<template>
    <el-col :span="item.col">
      <div class="mask" @click.stop="handleEditItem(item,index)">
        <xdh-form-item v-bind="clone(item)" :label="item.label" :labelWidth="item.labelWidth||'80px'" :prop="item.prop" :class="{'is-helper':showHelper===item, 'is-select':editField===item}" @mouseleave.native="handleMouseLeave(item)">
          <span class="depend-info" v-show="item.depend">依赖：{{item.depend}}</span>
          <div class="handle-btns">
            <i class="el-icon-delete" style="color:#ccc" @click.stop="removeItem(item)"></i>
            <!-- <i class="layui-icon layui-icon-screen-full" @mousedown.stop="mousedown" @mouseup.stop="mouseup" @mousemove="mousemove(item)" ></i> -->
          </div>
        </Xdh-form-item>
      </div>
    </el-col>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import XdhFormItem from '@/widgets/xdh-form/xdh-form-item'
export default {
  name: "TableRenders",
  components: { XdhFormItem },
  props: {
    item: {
      type: Object,
      default() {
        return {

        }
      }
    },
    index: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      showHelper: null,
      dragging: false,
      ismousedown: false,
    }
  },
  computed: {
    ...mapState({
      form: state => state.formModel,
      fields: state => state.fields,
      editField: state => state.editField,
    }),
    ...mapGetters(['model', 'nodeInfo']),
    classes() {
      return {
        'is-empty': this.fields.length === 0
      }
    }
  },
  methods: {
    clone(data) {
      console.log('clone')
      return JSON.parse(JSON.stringify(data))
    },
    handleMouseEnter(item) {
      console.log('handleMouseEnter', item)
      if (this.dragging) return
      this.showHelper = item
    },
    handleMouseLeave(item) {
      this.showHelper = null
    },
    handleEditItem(item, index) {
      this.$store.commit('setEditTableField', null)
      this.$store.commit('setEditField', null)
      this.$store.commit('setEditButtonField', null)
      console.error(item,"12321321321")
      item.index = index;
      let info = Object.assign({}, item);
      // this.$store.dispatch('user/setNodeinfo', info);
      this.$store.commit('setEditField', info)
      console.log(info)
      console.log('handleEditItem', this.$store.getters, 8888888888);
      // this.$store.commit('setSearchEditField', info)
    },
    removeItem(item) {
      const isDepend = !!this.fields.find(n => n.depend === item.prop)
      if (isDepend) {
        this.$message.warning('该字段被其他字段依赖，不能删除')
        return
      }
      this.$store.commit('setEditField', null)
      this.$store.commit('setEditButtonField', null)
      this.$store.commit('setEditTableField', null)
      this.$store.commit('removeField', item)
    },
    handleDblClick() {
      this.$store.commit('setEditField', null)
    },
  }
}
</script>
